<template>
  <j-modal
    :title="title"
    :width="980"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="24" pull="2">

            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="物料编码" v-if=this.isCreate>
              <a-auto-complete
                v-model="selectProduct.skuCode"
                :data-source="productSnDataSource"
                style="width: 160px"
                :filter-option="filterOption"
                @change="productChange"
              />
            </a-form-item>
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="物料编码" v-else>
              <a-input  v-model="selectProduct.skuCode"  readOnly disabled style="width: 160px" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="货号">
              <a-input style="width: 123%" v-model="selectProduct.productSn" readOnly disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="商品名称">
              <a-input style="width: 123%"  v-model="selectProduct.name" readOnly disabled/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="价格">
              <a-input style="width: 123%" v-model="selectProduct.price" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>

import {httpAction, getAction, postAction} from '@/api/manage'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import Vue from 'vue'


export default {
  name: 'StmStoreProduct',

  data() {
    return {
      productSnDataSource: [],
      productAllData:[],
      selectProduct:{skuCode:'',price:'',name:'',productSn:'',id:'',storeId:''},
      title: '新增',
      brandCategory:0,
      visible: false,
      model: {},
      isCreate:true,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      url: {
        addOrUpdate: '/stm/stmStoreInfo/AddProductSku',
        queryProductList: '/pms/pmsProduct/queryProductList'
      }
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token":token};
  },
  computed:{

  },
  methods: {
    add(storeId) {
      this.confirmLoading = false;
      this.visible = true;
      this.selectProduct={skuCode: '',productSn:'',name: '',id:'',storeId:storeId };
      this.getProduct();
      this.isCreate=true;
    },

    edit(record) {
      this.confirmLoading = false;
      this.visible = true;
      this.selectProduct={skuCode: record.skuCode,productSn:record.productSn,name: record.productId_dictText,id:record.id,price:record.price, storeId:record.storeId }
      this.editEnable = true;
      this.isCreate=false;
    },
    handleOk() {
      this.confirmLoading = true
      if(!this.selectProduct.skuCode){
        this.$message.warning("请选择物料编码");
        return ;
      }
      if(!this.selectProduct.price){
        this.$message.warning("请设置商品价格");
        return ;
      }
      if(!this.selectProduct.storeId || this.selectProduct.storeId<1){
        this.$message.warning("请选择经销商");
        return ;
      }

      postAction(this.url.addOrUpdate, this.selectProduct).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('updateCompleted',1);
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
        this.close()
      })

      this.confirmLoading = false
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    getProduct(){
      let params={
        brandCategory:this.brandCategory
      }
      getAction(this.url.queryProductList,params).then(res=>{
        if(res.success){
          console.log('ProductData => ' + res.result);
          this.productAllData =res.result;
          this.productSnDataSource =  [... new Set(res.result.map(data => (data['skuCode'])))];
        }else{
          console.log(res.message);
        }
      });
    },
    handleCancel() {
      this.close()
    },
    setSelectProduct(skuCode){
      if(this.productAllData) {
        for (let i = 0; i < this.productAllData.length; i++) {
          if (this.productAllData[i].skuCode == skuCode) {
            this.selectProduct.skuCode = this.productAllData[i].skuCode;
            this.selectProduct.productId = this.productAllData[i].id;
            this.selectProduct.productSn = this.productAllData[i].productSn;
            this.selectProduct.name = this.productAllData[i].name;
            return;
          }
        }
      }
    } ,
    productChange(skuCode){
      this.setSelectProduct(skuCode);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLocaleLowerCase().indexOf(input.toLocaleLowerCase()) >= 0
      );
    },
  }
}
</script>

<style lang="less" scoped>

</style>
